<template>
	<view class="">

		<view class="">
			<text>uni.request点击请求数据：</text>
			<button type="default" @click="request_one">最基础的方式，(容易回调地狱)</button>
			<button type="default" @click="request_two">可以用的方式</button>
			<button type="default" @click="requestapi">async await 最常用的方式</button>
			<button type="default" @click="shownone">点击显示OR隐藏结果</button>
		</view>
		<view class="layout" v-if="show">
			<view class="row" v-for="(item,index) in arrs" :key="item.id">
				<view class="title">{{item.title}}</view>
				<view class="content">{{item.body}}</view>
			</view>
		</view>
		<br />
		<view class="">
			<text>以下所有结果在console.log中查看！</text>
		</view>
		<br />
		<view class="">
			<text>传统异步方式：</text>
			<button type="default" @click="getreq">传统异步回调地狱（1.0版本)</button>
		</view>
		<br />
		<view class="">
			<text>异步请求方式转变，以及Promise的使用方式：</text>
			<button type="default" @click="promise_one">promise基础用法</button>
			<button type="default" @click="promise_two">promise封装用法</button>
			<button type="default" @click="promise_getreq">promise改传统异步回调(then链式调用)(2.0版本)</button>
			<button type="default" @click="promise_all_getreq">promise_all用法全部请求(3.0版本)</button>
			<button type="default" @click="promise_async_await">async await 异步请求方式(4.0版本)</button>
		</view>
		<view class="">
			<text>
				(ES7 async await 那么ES6和ES5分别是什么)
				https://blog.csdn.net/weixin_44159194/article/details/138404395?fromshare=blogdetail
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	let arrs = ref([])
	const show = ref(true)

	function shownone() {
		show.value = !show.value
	}
	


	// =============================
	// 异步请求的几种用法 
	// =============================

	// 最基础但不常用
	function request_one() {
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
			success: function(e) {
				arrs.value = e.data
			}
		})
	}
	// 可以用的一种方式
	function request_two() {
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts'
		}).then(res => {
			arrs.value = res.data
		})
	}
	// 最常用方式 async await
	async function requestapi() {
		let res = await uni.request({
			url: "https://jsonplaceholder.typicode.com/posts"
		})
		console.log(res)
		arrs.value = res.data
	}


	// =============================
	// 传统异步请求的方式，容易出现回调地狱，放弃使用
	// =============================

	function getreq() {
		getNav(res => {
			console.log(res.data[0].id)
			let id = res.data[0].id;
			getlist(id, res => {
				console.log(res.data[0].id)
				let id = res.data[0].id;
				getcomment(id, res => {
					console.log(res);
				})
			})
		})
	}

	// 获取导航列表
	function getNav(callback) {
		uni.request({
			url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
			success: (res) => {
				callback(res);
			}
		})
	}

	// 获取新闻列表
	function getlist(id, callback) {
		uni.request({
			url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
			data: {
				cid: id
			},
			success: (res) => {
				callback(res)
			}
		})
	}
	// 获取评论内容列表(251的ID有两个评论)
	function getcomment(id, callback) {
		uni.request({
			url: "https://ku.qingnian8.com/dataApi/news/comment.php",
			data: {
				aid: id
			},
			success: (res) => {
				callback(res)
			}
		})
	}


	// =============================
	// promise的用法
	// =============================
	function promise_one() {
		let p = new Promise((resolve, reject) => {
			uni.request({
				url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
				success: function(res) {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		});
		// 箭头函数的几种语法
		// p.then(function(res){
		// 	console.info(res);
		// })

		// p.then((res)=>{
		// 	console.log(res)
		// })

		p.then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
		})

	}


	// =============================
	// promise方法封装函数
	// =============================
	function promises() {
		return new Promise((resolve, reject) => {
			uni.request({
				url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
				success: function(res) {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		});
	}

	function promise_two() {
		promises().then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
		})
	}


	// =============================
	// 用Promise改造传统方法
	// =============================
	function promise_getreq() {
		// 两种写法
		// 简单写法,没有catch错误返回调用
		getNav_s()
			.then(res => {
				console.log(res)
				let id = res.data[0].id
				console.log(id);
				return getlist_s(id);
			})
			.then(res => {
				console.log(res)
				let id = res.data[0].id
				return getcomment_s(id)
			})
			.then(res => {
				console.log(res)
			})
		// 严谨写法返回catch错误调用（只需要在链式调用的最后面调用一次就可以)
		/*
		getNav_s()
		.then(res => {
			console.log(res)
			let id = res.data[0].id
			console.log(id);
			return getlist_s(id);
		})
		.then(res => {
			console.log(res)
			let id = res.data[0].id
			return getcomment_s(id)
		})
		.then(res => {
			console.log(res)
		})
		.catch(res => {
			console.log(res)
		})
		*/
	}


	// 获取导航列表
	function getNav_s() {
		return new Promise((resolve, reject) => {
			uni.request({
				url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
				success: function(res) {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		});

	}

	// 获取新闻列表
	function getlist_s(id) {
		return new Promise((resolve, reject) => {
			uni.request({
				url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
				data: {
					cid: id
				},
				success: function(res) {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		});
	}
	// 获取评论内容列表(251的ID有两个评论)
	function getcomment_s(id) {
		return new Promise((resolve, reject) => {
			uni.request({
				url: "https://ku.qingnian8.com/dataApi/news/comment.php",
				data: {
					aid: id
				},
				success: function(res) {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		});
	}


	// =============================
	// 用Promise.all用法,全部请求然后在处理
	// =============================
	function promise_all_getreq() {

		uni.showLoading({
			title: "数据加载中。。。"
		})

		let p1 = getNav_s();
		let p2 = getlist_s(51);
		let p3 = getcomment_s(251);

		Promise.all([p1, p2, p3]).then(res => {
			uni.hideLoading()
			console.log(res);
		})
	}


	// =============================
	// async await 异步请求方式
	// =============================
	async function promise_async_await() {
		uni.showLoading({
			title: "数据加载中。。。"
		})
		let id,res;
		try{
			res = await getNav_s()
			id = res.data[0].id;
			console.log(res);
			res = await getlist_s(id)
			id = res.data[0].id;
			console.log(res);
			res = await getcomment_s(id).catch()
			console.log(res)
			uni.hideLoading()
			uni.showToast({
				title:'成功并打印console.log'
			})
		}catch(err){
			console.log(err)
			uni.hideLoading()
			uni.showToast({
				title:err.errMsg+'异常'
			})
		}
		
		
		
	}
</script>

<style lang="scss" scoped>
	.layout {
		padding: 30rpx;

		.row {
			border: 1px solid #cfcfcf;

			.title {
				font-size: 36rpx;
				margin-bottom: 5rpx;
			}

			.content {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	button {
		background: #fff;
		border: 4rpx solid #000;
		margin-top: 10rpx;
	}
</style>